<template>
		<u-swiper 
		height='258rpx' 
		radius='16rpx 16rpx 0 0' 
		:autoplay='true' 
		bgColor='transparent'  
		:list="banner"
		@click="bannerClick" 
		keyName='image'
		indicatorMode='dot'
		circular
		:indicator="true"
		imgMode='scaleToFill'	
		:previousMargin='0'
		:nextMargin='0'
		indicatorActiveColor='#0AFAAC'
		indicatorInactiveColor='#2B4855'
	>
	</u-swiper>
	<!-- <liu-super-slide :swiperList="banner" autoplay circular :interval="3000" @click="bannerClick"></liu-super-slide> -->
	<!-- <n-swiper v-model="banner" :options="options">
		<n-swiper-item v-for="(item,index) in banner" :key="index" @click="bannerClick(index)">
			<image class="image" :src="item.image" mode="aspectFill"> </image>
		</n-swiper-item>
	</n-swiper> -->
</template>

<script>
	import {
		getBannerList
	} from '@/api/banner/index.js'
	export default {
		name: "w-swiper",
		props: {
			type: {
				type: [String, Number],
				default: 1
			}
		},
		data() {
			return {
				banner: [],
				options: {
					effect: 'cards',
					// loop: true,
					autoplay: true,
					pagination: {
						el: true,
					},
					cardsEffect: {
						rotate: false,
						perSlideOffset: 4,
						perSlideRotate: 2
					}
				},
			};
		},
		mounted() {
			this.getList()
		},
		methods: {
			//获取banner列表
			getList() {
				getBannerList({
					type: this.type
				}).then(res => {
					this.banner = res.data.data.map(v => {
						v.image = this.$ossUrl + v.image
						return v
					})
				}).catch(e => {

				})
			},
			//点击banner图
			bannerClick(index) {
				let {
					url_type,
					url
				} = this.banner[index]
				if (!url) return;
				if (String(url).startsWith('/pages')) {
					this.$u.route(url)
				} else if (String(url).startsWith('https://mp.weixin.qq.com/')) {
					// #ifdef H5
					window.location.href = url
					// #endif
					// #ifdef APP-PLUS
					this.toLocalWebview(url)
					// #endif
				} else {
					this.toLocalWebview(url)
				}


			},
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-cards {
		width: 260rpx;
		// margin-left: 280rpx;
	}

	.image {
		height: 584rpx;
		width: 428rpx;
		border-radius: 24rpx;
	}

	/deep/ .swiper-pagination-bullet-active {
		background: #fff !important;
	}
</style>